
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登录成功</title>
</head>
<link rel="stylesheet" href="css/book.css">
<script src="js/jquery.js"></script>
<%--<script src="js/books.js"></script>--%>
<body>
<img src="${loginUser.headImg}" class="headImg">
<form>
    书名: <input type="text" name="bookName" id="bookName">
    书类型 :<input type="text" name="bookType" id="bookType">
    作者: <input type="text" name="writerName" id="writerName">
    出版起始时间:<input type="Date"name="startDate" id="startDate">
    出版结束时间:<input type="Date"name="endDate" id="endDate">
    <input type="button" value="搜索" id="searchBook">
</form>
<br>
<a href="addBook.jsp">添加书籍</a>
<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>书id</td>
        <td>书名</td>
        <td>书类型</td>
        <td>作者</td>
        <td>出版时间</td>
        <td>删除</td>
        <td>修改</td>
    </tr>

</table>
<div id="pageBar">

</div>
<select id="pageSize">
    <option value="5">5</option>
    <option value="10" selected>10</option>
    <option value="15">15</option>
    <option value="20">20</option>
</select>

<script>
    $(document).ready(function() {
        searchBook(1);
    });
    $("#searchBook").click(function(){
        searchBook(1);
    })

    $("#pageSize").change(function(){
        searchBook(1);
    })

    function searchBook(pageNum){

        $("tbody").empty();

        let trHead = $("<tr></tr>");
        trHead.append("<td>"+"书id"+"</td>");
        trHead.append("<td>"+"书名"+"</td>");
        trHead.append("<td>"+"作者"+"</td>");
        trHead.append("<td>"+"书类型"+"</td>");
        trHead.append("<td>"+"价格"+"</td>");
        trHead.append("<td>"+"出版日期"+"</td>");
        trHead.append("<td>"+"封面"+"</td>");
        trHead.append("<td>"+"删除"+"</td>");
        trHead.append("<td>"+"修改"+"</td>");
        $("tbody").append(trHead);

        let bookName = $("#bookName").val();
        let writerName = $("#writerName").val();
        let bookType = $("#bookType").val();
        let startDate = $("#startDate").val();
        let endDate = $("#endDate").val();
        let pageSize = $("#pageSize").val();
        $.ajax({
            url:"books",
            type:"get",
            data:{
                "bookName":bookName,
                "writerName":writerName,
                "bookType":bookType,
                "startDate":startDate,
                "endDate":endDate,
                "pageNum":pageNum,
                "pageSize":pageSize
            },
            dataType:"json",
            success:function(data){
                console.log(data);
                let books = data.list;
                console.log(books);
                for(let i = 0;i<books.length;i++){
                    let book = books[i];
                    let tr = $("<tr></tr>");
                    tr.append("<td>"+book.bookId+"</td>");
                    tr.append("<td>"+book.bookName+"</td>");
                    tr.append("<td>"+book.writerName+"</td>");
                    tr.append("<td>"+book.bookType+"</td>");
                    tr.append("<td>"+book.bookPrice+"</td>");
                    tr.append("<td>"+book.pubDate+"</td>");
                    tr.append("<td><img src='" + book.bookCover + "' class='bookImg'></td>");

                    // 添加删除功能
                    let deleteTd = $("<td></td>");
                    let deleteForm = $(`<a href="#" onclick="deleteBook(${"${book.bookId}"})">删除</a>
`)
                    deleteTd.append(deleteForm);
                    tr.append(deleteTd);

                    // 添加修改功能
                    let updateTd = $("<td></td>");
                    let updateLink = $("<a href='update.jsp?bookId=" + book.bookId + "&bookName=" + encodeURIComponent(book.bookName) + "&bookType=" + encodeURIComponent(book.bookType) + "&writerName=" + encodeURIComponent(book.writerName) + "&pubDate=" + book.pubDate + "&bookPrice=" + book.bookPrice +"&bookCover=" + book.bookCover +"'>修改</a>");
                    updateTd.append(updateLink);
                    tr.append(updateTd);


                    $("tbody").append(tr);
                }
                makePageBar(data);
            }
        })
    }
    //jsp中要使用 模板字符串
    function makePageBar(data){
        let pageBar = $("#pageBar");
        pageBar.empty();
        if(data.hasPreviousPage){
            let lastPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum-1}"})">上一页</a>`);
            pageBar.append(lastPage);
        }

        for(let i = 0;i<data.navigatepageNums.length;i++){
            let a = $(`<a href="#" onclick="searchBook(${"${data.navigatepageNums[i]}"})">${"${data.navigatepageNums[i]}"}</a>`);
            if(data.pageNum == data.navigatepageNums[i]){
                a.addClass("red");
            }
            pageBar.append(a);
        }
        if(data.hasNextPage){
            let nextPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum+1}"})">下一页</a>`);
            pageBar.append(nextPage);
        }
    }
    function deleteBook(bookId){
        let confirm = window.confirm("请确认是否要删除，无法撤销");
        if(!confirm){
            return false;
        }
        $.ajax({
            url:"deleteBook",
            type:"POST",
            data:{
                "bookId":bookId
            },
            success:function(data){
                if(data == 'success'){
                    alert("删除成功");
                    searchBook(1);
                }else{
                    alert("删除失败");
                }
            }
        })
    }

</script>
</body>
</html>
